<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-input size="mini" v-model="formInline.num" placeholder="请输入耗材编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" v-model="formInline.name" placeholder="请输入耗材名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-select clearable v-model="formInline.testBaseId" placeholder="请选择基地" size="mini">
                <el-option :label="item.NAME" v-for="item in teatbaseList" :key="item.ID" :value="item.ID"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.status" placeholder="请选择状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="buttonList">
      <el-col>
        <!-- <el-button type="primary" size="mini" @click="newAdd">新增</el-button>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit('edit')">编辑</el-button>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit('view')">查看</el-button>
        <el-button type="danger" size="mini">启/禁用</el-button> -->
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="receiveEdit()">申请</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          border
          size="mini"
          style="width: 100%">
          <el-table-column
                  align="center"
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
            align="center"
            prop="NUM"
            width="200px"
            label="耗材编号">
          </el-table-column>
          <el-table-column
            align="center"
            width="200px"
            prop="NAME"
            label="耗材名称">
          </el-table-column>
          <el-table-column
            align="center"
            prop="QUANTITY"
            width="160px"
            label="剩余数量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="WARNQUANTITY"
            width="160px"
            label="预警数量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="TYPE"
            width="160px"
            label="处置方式">
          </el-table-column>
          <el-table-column
            align="center"
            prop="UNIT"
            width="160px"
            label="单位">
          </el-table-column>
          <el-table-column
            align="center"
            prop="TYPE"
            width="160px"
            label="类型">
          </el-table-column>
          <el-table-column
            align="center"
            prop="BREED"
            width="160px"
            label="品种">
          </el-table-column>
          <el-table-column
            align="center"
            prop="TESTBASENAME"
            width="200px"
            label="所属基地">
          </el-table-column>
          <el-table-column
            align="center"
            prop="STATUS"
            label="状态"
            fixed="right">
            <template slot-scope="scope">
              {{scope.row.STATUS ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          
          <el-table-column
            align="center"
            prop="UPDATETIME"
            width="150px"
            label="更新时间">
            <template slot-scope="scope">
              {{new Date(scope.row.UPDATETIME).toLocaleString()}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="耗材信息" :visible.sync="dialogFormVisible" center width="50%">
      <el-form :model="form" ref="form" :rules="rules" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属基地" prop="testBaseId">
              <el-select clearable :disabled="nptDisabled" v-model="form.testBaseId" placeholder="请选择基地" size="mini">
                <el-option :label="item.NAME" v-for="item in teatbaseList" :key="item.ID"  :value="item.ID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="耗材编号" prop="num">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.num" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="耗材名称" prop="name">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="耗材单位" prop="unit">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.unit" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="耗材类型" prop="type">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.type" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="耗材品种" prop="breed">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.breed" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input :disabled="nptDisabled" size="mini" v-model="form.remarks" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="废弃物处置申请" :visible.sync="receiveFormVisible" center width="30%">
      <el-form :model="receiveForm" ref="receiveForm" :rules="receiveFormRules" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="18">
            <el-form-item label="数量" prop="quantity">
              <el-input size="mini" type="number" v-model="receiveForm.quantity" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="出库编号" prop="receiveNum">
              <el-input size="mini" v-model="receiveForm.receiveNum" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="原因" prop="reason">
              <el-input size="mini" v-model="receiveForm.reason" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="处置方式" prop="type">
              <el-input size="mini" v-model="receiveForm.type" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="备注" prop="remarks">
              <el-input :disabled="nptDisabled" size="mini" v-model="receiveForm.remarks" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="receiveFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitReceiveForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "trainBase",
    data() {
      return{
        pagination: {
          pageSize: 10,
          total: 1,
          pageNo: 1
        },
        form: {
          id: '',
          testBaseId: '',
          num: '',
          name: '',
          unit: '',
          type: '',
          breed: '',
          remarks: '',
        },
        receiveForm: {
          materialId: '',
          quantity: '',
          receiveNum: '',
          reason: '',
          type: '',
          remarks: ''
        },
        rules: {
          testBaseId: [
            { required: true, message: '请选择基地', trigger: 'change' },
          ],
          num: [
            { required: true, message: '请输入耗材编号', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入耗材名称', trigger: 'blur' },
          ],
          unit: [
            { required: true, message: '请输入耗材单位', trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请输入耗材类型', trigger: 'blur' },
          ],
          breed: [
            { required: true, message: '请输入耗材品种', trigger: 'blur' },
          ],
          warnQuantity: [
            { required: true, message: '请输入预警值', trigger: 'blur' },
          ],
        },
        receiveFormRules: {
          quantity: [
            { required: true, message: '请输入废弃物数量', trigger: 'blur' },
          ],
          reason: [
            { required: true, message: '请输入废弃物原因', trigger: 'blur' },
          ],
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        receiveFormVisible: false,
        formInline: {},
        tableData: [],
        teatbaseList: [],
        userList: [],
        selectId: [],
        btnDisabled: true,
        isEdit: false,
        isReceiveEdit: false,
        nptDisabled: false
      }
    },
    created() {
      this.search();
      this.$post('/testBase/findTestBase').then(res => {
        this.teatbaseList = res.data.data.dataList;
      });
    },
    methods: {
      getMaterial(pageSize, pageNo) {
        this.$post('/material/findMaterial', {pageSize, pageNo}).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      search() {
        let form = {
          num: this.formInline.num,
          name: this.formInline.name,
          testBaseId: this.formInline.testBaseId,
          status: this.formInline.status,
          pageSize: this.pagination.pageSize,
          pageNo: 1
        }
        this.$post('/material/findMaterial', form ).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      newAdd() {
        this.dialogFormVisible = true;
      },
      edit(val) {
        this.isEdit = true;
        if(val === 'view') {
          this.nptDisabled = true
        } else {
          this.nptDisabled = false
        }
        this.form.id = this.selectId[0].ID;
        this.form.testBaseId = this.selectId[0].TESTBASEID;
        this.form.num = this.selectId[0].NUM;
        this.form.name = this.selectId[0].NAME;
        this.form.unit = this.selectId[0].UNIT;
        this.form.type = this.selectId[0].TYPE;
        this.form.breed = this.selectId[0].BREED;
        this.form.remarks = this.selectId[0].REMARKS;
        this.dialogFormVisible = true
      },
      receiveEdit(){
        this.isReceiveEdit = true;
        this.receiveForm.materialId = this.selectId[0].ID;
        this.receiveFormVisible = true
      },
      handleSelectionChange(val) {
        this.selectId = val;
        if(val.length === 1) {
          this.btnDisabled = false;
        } else {
          this.btnDisabled = true;
        }
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.getMaterial(size, this.pagination.pageNo);
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.getMaterial(this.pagination.pageSize, page);
      },
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let url = '';
            if(this.isEdit) {
              url = '/material/update'
            } else {
              url = '/material/add'
            }
            this.$post(url, this.form).then(res => {
              if(res.data.status === 1){
                this.$message.success('保存成功');
                this.getMaterial(this.pagination.pageSize, this.pagination.pageNo);
                this.dialogFormVisible = false;
                this.isEdit = false;
              } else{
                this.$message.error(res.data.msg)
              }
            });
          } else {
            return false;
          }
        });
      },
      submitReceiveForm() {
        this.$refs['receiveForm'].validate((valid) => {
          if (valid) {
            let url = '/materialScrap/add';
            this.$post(url, this.receiveForm).then(res => {
              if(res.data.status === 1){
                this.$message.success('请求成功');
                this.getMaterial(this.pagination.pageSize, this.pagination.pageNo);
                this.receiveFormVisible = false;
                this.isReceiveEdit = false;
              } else{
                this.$message.error(res.data.msg)
              }
            });
          } else {
            return false;
          }
        });
      },
      handleNodeClick(data) {
        console.log(data);
      }
    }
  }
</script>

<style scoped lang="scss">
  .dateStyle{
    /deep/.el-input__inner {
      padding-left: 30px !important;
    }
  }
  /deep/.el-form-item__error {
    top: 32px;
  }
</style>
